<template>
    <div style="height: 68vh; border: 1px solid grey; overflow-x: hidden; overflow-y: scroll;" @contextmenu.prevent>
        <a-spin :spinning="loading">
            <a-row v-for="floor in roomFloorList" :key="floor.roomLevelCode" style="margin-bottom: 10px;">
                <a-card-grid v-for="item in floor.rooms" :key="item.roomCode" :style="getRoomStyle(item)"
                    @contextmenu.native="e => onContextmenu(e, item)">
                    <!-- 左上角 -->
                    <div style="font-weight: bold;">
                        {{ item.roomCode }}
                    </div>
                    <!-- 内容 -->
                    <div>
                        {{ item.roomTypeCode_dictText }}
                    </div>
                    <div>
                        {{ item.roomPrice }}
                    </div>
                    <!-- 右下角 -->
                    <div style="position: absolute; bottom:0; right: 0">
                        {{ item.bedNum }}床
                    </div>
                    <!-- 左下角 -->
                    <div style="position: absolute; bottom:0; left: 5px; cursor: pointer; ">
                        <a-icon type="info-circle" theme="twoTone" />
                    </div>
                    <!-- 右上角 -->
                    <div v-if="item.roomMg"
                        :style="{ ...getCssTopRight('20px', '20px'), ...getBackgroundColor(item.roomMg) }" />
                </a-card-grid>
            </a-row>
        </a-spin>
        <RoomContextMenu ref="roomContextMenu" :visible.sync="contextMenuVisible" style="z-index: 9999;" />
    </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import RoomContextMenu from './RoomContextMenu/index'
import { KfStyleSettingMixin } from '@/views/PmsKF/KfStyleSetting/KfStyleSetting'
// import { KfStyleSettingMixin } from '../../KfStyleSetting/KfStyleSetting'

export default {
    name: "rooms",
    mixins: [JeecgListMixin, KfStyleSettingMixin],
    components: {
        RoomContextMenu
    },
    data() {
        return {
            url: {
                list: '/room/roomStatus/list'
            },
            columns: [],
            isorter: {
                column: 'roomCode',
                order: 'asc',
            },
            ipagination: {
                current: 1,
                pageSize: 9999,
            },
            contextMenuVisible: false,
        }
    },
    computed: {
        roomFloorList() {
            const rl = []
            for (let r of this.dataSource) {
                if (rl.filter(item => item.roomLevelCode === r.roomLevelCode).length === 0) {
                    rl.push({
                        roomLevelCode: r.roomLevelCode,
                        roomLevelCode_dictText: r.roomLevelCode_dictText,
                        rooms: [r]
                    })
                } else {
                    rl.filter(item => item.roomLevelCode === r.roomLevelCode)[0].rooms.push(r)
                }
            }
            return rl
        },
        getRoomStyle() {
            return (data) => {
                return { ...this.getCssFT, ...this.getBackgroundColor(data.roomState) }
            }
        },
    },
    methods: {
        changeParam(key, value) {
            if (key === 'type') {
                if (value === 'all') {
                    delete this.queryParam.roomTypeCode
                    this.searchQuery()
                } else {
                    this.queryParam.roomTypeCode = value
                    this.searchQuery()
                }
            } else if (key === 'floor') {
                if (value === 'all') {
                    delete this.queryParam.roomLevelCode
                    this.searchQuery()
                } else {
                    this.queryParam.roomLevelCode = value
                    this.searchQuery()
                }
            } else {
                this.queryParam = {}
                this.searchQuery()
            }
        },
        onContextmenu(e, item) {
            if (item.id) {
                e.preventDefault()
                this.$refs.roomContextMenu.room = item
                this.contextMenuVisible = true
            }
        },
    }
}
</script>

<style lang="less" scoped></style>